<template>
  <div id="mainMenu">
    <div class="left">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="1" @click="fileMangrent">
          <!-- <template slot="title"> -->
          <i class="el-icon-location"></i>
          <span slot="title">项目</span>
          <!-- </template> -->
          <!-- <el-menu-item-group>
          <span slot="title">分组一</span>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <span slot="title">选项4</span>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu> -->
        </el-menu-item>
        <el-menu-item index="2" @click="modeMangrent">
          <i class="el-icon-menu"></i>
          <span slot="title">表单设计</span>
        </el-menu-item>
        <el-menu-item index="3" @click="sqlmangrent">
          <i class="el-icon-document"></i>
          <span slot="title">数据</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="pland" v-if="type != 'file'">
      <!-- 文件模块 -->
      <el-collapse v-if="type == 'file'">
        <el-collapse-item>
          <template slot="title">
            文件中心 Consistency<i class="header-icon el-icon-info"></i>
          </template>
        </el-collapse-item>
      </el-collapse>
      <!-- 表单模块 -->
      <el-collapse v-if="type == 'mode'">
        <el-collapse-item>
          <template slot="title">
            项目列表<i class="header-icon el-icon-circle-plus"></i>
          </template>
          <div>
            <tree-data :type="type" @rk="rightClick()"></tree-data>
          </div>
        </el-collapse-item>
        <el-collapse-item>
          <template slot="title">
            流程模型<i class="header-icon el-icon-circle-plus"></i>
          </template>
          <div>
            <tree-data type="flow" @rk="rightClick()"></tree-data>
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- 数据模块 -->
      <el-collapse v-if="type == 'sql'">
        <el-collapse-item>
          <template slot="title">
            数据库<i class="header-icon el-icon-circle-plus"></i>
          </template>
          <tree-data type="sql" @rk="sqlrightClick()"></tree-data>
        </el-collapse-item>
        <el-collapse-item>
          <template slot="title">
            数据模型<i class="header-icon el-icon-circle-plus"></i>
          </template>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
const { ipcRenderer, remote } = require("electron");
const { Menu, MenuItem } = remote;
import treeData from "@/components/sysComponets/treeData.vue";

export default {
  name: "mainMenu",
  components: {
    treeData,
  },
  data() {
    return {
      form: {},
      formLabelWidth: "80px",
      type: "file",
      isCollapse: true,
      filterText: "",
    };
  },
  methods: {
    sqlmangrent() {
      this.type = "sql";
      this.$emit("openPage", "/sql");
    },
    fileMangrent() {
      this.type = "file";
      this.$emit("openPage", "df");
    },
    modeMangrent() {
      this.type = "mode";
      this.$emit("openPage", "/mode");
    },
    // 右键菜单
    rightClick(id) {
      const that = this;
      const menu = new Menu();
      menu.append(
        new MenuItem({
          label: "新建页面",
          click() {
            // 执行remove方法，不能直接使用 this.removeItem
            ipcRenderer.send("openFormEditor");
          },
        })
      );
      menu.append(
        new MenuItem({
          label: "编辑页面",
          click() {
            ipcRenderer.send("openFormEditor");
          },
        })
      );
      menu.popup(remote.getCurrentWindow());
    },
    sqlrightClick() {
      const that = this;
      const menu = new Menu();
      menu.append(new MenuItem({ label: "新建数据表", click() {} }));
      menu.append(new MenuItem({ label: "修改数据表", click() {} }));
      menu.append(new MenuItem({ label: "删除数据表", click() {} }));
      menu.popup(remote.getCurrentWindow());
    },
  },
};
</script>

<style>
#mainMenu {
  height: 100%;
}

.el-menu-vertical-demo {
  height: 100% !important;
}
.el-collapse-item__header {
  height: 28px !important;
  line-height: 28px;
  font-weight: bold;
  font-size: 12px !important;
  border-bottom: 0px;
}
.pland {
  width: 244px;
  position: fixed;
  top: 28px;
  float: right;
  left: 70px;
  height: 100%;
  border-right: 1px solid #eeeeee;
}
.left {
  height: 100%;
}

.header-icon {
  margin: 0 8px 0 auto;
  font-size: 15px;
}

.el-collapse-item__arrow {
  margin: 0;
}
</style>